<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{%block title%}Document{% endblock %}</title>
    {% block css %}
    <link rel="stylesheet" href="{{url_for('static',filename='css/homeOne.css')}}" />
    <link rel="stylesheet" href="{{url_for('static',filename='css/font-awesome.min.css')}}" />
    {% endblock %}
    {% block js %}
    <script src="{{url_for('static',filename='js/home.js')}}"></script>
    <script type="text/javascript" src="../static/libs/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../static/libs/echarts.min.js"></script>
    {% endblock %}
</head>

<body style="overflow-x:hidden;">
    <header class="header" id="header">
        <div class="container">
            <div class="top">
                <h1>
                    <a href="#" title="Web漏洞扫描器" style="font-family: Helvetica">SZHE</a>
                </h1>
                <div class="userCenter">
                    <ul class="userCenter-list" role="tablist">
                        <li><a href="{{url_for('user')}}" role="tab">个人中心</a></li>
                        <li><a href="{{url_for('logout')}}" role="tab">注销</a></li>
                    </ul>
                </div>
            </div>
            <hr />
            <nav class="navigation" id="nav">
                <ul class="navList" id="myTab" role="tabList">
                    <li><a href="{{url_for('index')}}" role="tab" class="one">主页</a></li>
                    <li><a href="{{url_for('console')}}" role="tab" class="two">控制台</a></li>
                    <li><a href="{{url_for('buglist')}}" role="tab" class="three">漏洞列表</a></li>
                    <li><a href="{{url_for('POCmanage')}}" role="tab" class="four">POC管理</a></li>
                    <li><a href="{{url_for('log_detail')}}" role="tab" class="six">日志</a></li>
                    <li><a href="{{url_for('about')}}" role="tab">关于</a></li>
                    <div class="slider"></div>
                </ul>
                <div class="search-box">
                    <input class="search-txt" type="text" name="" placeholder="  search..." />
                    <a class="search-btn" href="#">
                        <i class="fa fa-search"></i>
                    </a>
                </div>
            </nav>
            <div class="burger">
                <div class="burger-line1"></div>
                <div class="burger-line2"></div>
                <div class="burger-line3"></div>
            </div>
        </div>
    </header>
    <div class="context">
        <div class="left-context" style="display:block;">
            <div class="statistic">
                <h5 class="h5">漏洞等级分布图</h5>
                <div id="container" class="container" style="height: 250px;width:90%;"></div>
            </div>
            <div class="skills" style="display:block;">
                <h2>漏洞类型统计</h2>
                {% for name,num in bugtype.items() %}
                <div class="skill">
                    <div class="skill-name skill-one">{{name}}</div>
                    <div class="skill-bar">
                        <div class="skill-per" per="{{num}}">
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="right-context">
            {%block rightcontext%}
            {% endblock %}
        </div>
    </div>
    <div class="body-tail">
        Copyright @ SZHE Vulnerability Scanner
    </div>
    {% block addjs %}
    <script type="text/javascript">
        $('.skill-per').each(function () {
            var $this = $(this);
            var per = $this.attr('per');
            $this.css("width", per + '%');
            $({ animatedValue: 0 }).animate(
                { animatedValue: per },
                {
                    duration: 300,
                    step: function () {
                        $this.attr('per', Math.floor(this.animatedValue) + '%');
                    },
                    complete: function () {
                        $this.attr('per', Math.floor(this.animatedValue) + '%');
                    }
                }
            );
        });

        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};

        app.title = "百分比";

        var option = {
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b}: {c} ({d}%)",
            },
            color: ["#90ee90", "#7342fa", "#fdb903", "#e9003a",],
            legend: {
                orient: "horizontal",
                x: "center",
                data: ["低危", "中危", "高危", "严重"],
            },
            series: [
                {
                    name: "漏洞属性",
                    type: "pie",
                    radius: ["35%", "75%"],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: "20",
                                fontWeight: "bold",
                            },
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    data: [
                        {
                            value: "{{bugbit.lowcount}}",
                            name: "低危",
                        },
                        {
                            value: "{{bugbit.mediumcount}}",
                            name: "中危",
                        },
                        {
                            value: "{{bugbit.highcount}}",
                            name: "高危",
                        },
                        {
                            value: "{{bugbit.seriouscount}}",
                            name: "严重",
                        },
                    ],
                },
            ],
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
    {% endblock %}
</body>

</html>